<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="isShow == true">
        <div slot="header" class="clearfix">
          <span>心跳日志列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission"/>
        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
                  @select="crud.selectChange" @select-all="crud.selectAllChange"
                  @selection-change="crud.selectionChangeHandler" @filter-change="crud.handleFilterChange"
                  @row-dblclick="goHeartbeatLogInfo"
                  @cell-mouse-enter="showTooltip" @cell-mouse-leave="hideTooltip"
                  :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
          <el-table-column v-if="columns.visible('agentName')" prop="agentName" label="节点名称"/>
          <el-table-column v-if="columns.visible('agentIp')" :show-overflow-tooltip="true" prop="agentIp" label="节点IP"/>
          <el-table-column v-if="columns.visible('centerCode')" prop="centerCode" label="中心编码"/>
          <el-table-column v-if="columns.visible('curConcurrenceNum')" :show-overflow-tooltip="true"
                           prop="curConcurrenceNum"
                           label="当前并发数"/>
          <el-table-column v-if="columns.visible('allConcurrenceNum')" prop="allConcurrenceNum" label="总并发数"/>
          <el-table-column v-if="columns.visible('curResNum')" :show-overflow-tooltip="true" prop="curResNum"
                           label="当前资源数"/>
          <el-table-column v-if="columns.visible('allResNum')" prop="allResNum" label="总资源数"/>
          <!-- <el-table-column v-if="columns.visible('execIngTaskNum')" prop="execIngTaskNum" label="正在执行任务数" width="170"/>-->
          <el-table-column v-if="columns.visible('sendTs')" :show-overflow-tooltip="true" prop="sendTs" label="发送时间"/>
          <el-table-column v-if="columns.visible('crtTs')" prop="crtTs" label="接收时间" width="180">
            <template slot-scope="scope">
              <!-- 悬浮提示 -->
              <el-tooltip placement="bottom-end" v-model="scope.row.showTooltip" :open-delay="500" effect="light"
                          :disabled="!scope.row.showTooltip">
                <!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
                <div slot="content">双击当前行点开详情</div>
                <div><i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.crtTs }}</span></div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <HeartBeatInf ref="hbInf" :goBack="goBack"/>
      <!-- 数据备份 -->
      <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="crud.backUp" title="服务器交互日志备份" width="680px">
        <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="备份日期">
                <el-date-picker style="margin-left: 50px" v-model="backUpDate" type="date" value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button icon="el-icon-document-delete" @click="backUpCancel()">取消</el-button>
          <el-button icon="el-icon-document-add" type="primary" @click="backUpSubmit()">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import logServer from '@/api/system/logManager'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/log/CRUD.operation'
import HeartBeatInf from './components'
import backUp from '@/api/backUp/backUp'

const queryList = [{
  'cloumValue': 'agentIp',
  'cloumName': '节点IP'
}, {
  'cloumValue': 'agentName',
  'cloumName': '节点名称'
}]
//默认去查询
const defaultCrud = CRUD({
  title: '节点管理',
  url: '/api/agentHeartbeatLog/selectPages',
  queryList: queryList,
  crudMethod: {
    ...logServer
  }
})
const defaultForm = {
  pkId: null,
  agentCode: null,
  agentName: null,
  agentDesc: null,
  agentIp: null,
  agentPort: null,
  agentStatus: null,
  serverVer: null,
  concurrentNum: null,
  resNum: null,
  agentAdmin: null,
  serverAccount: null,
  serverPwd: null,
  keyCode: null
}

export default {
  name: 'heartBeatLog',
  components: {crudOperation, HeartBeatInf},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      backUpDate: "",
      isShow: true,
      permission: {
        backUp: ['heartBeatLog:backUp'],
      }
    }
  },
  computed: {},
  created() {
    this.isShow = true;
  },
  methods: {
    backUpCancel() {
      this.crud.backUp = false
      this.backUpDate = ""
    },
    backUpSubmit() {
      var data = {
        "dateTs": this.backUpDate,
        "bitchType": "serverLog"
      }
      backUp.backUpData(data)
        .then(() => {
          this.$notify({
            title: '成功',
            message: '数据备份成功',
            type: 'success'
          });
          this.backUpDate = ""
          this.crud.backUp = false
          this.crud.query = {}
          this.crud.params = {}
          this.crud.toQuery()
        })
        .catch(() => {
          this.$notify.error({
            title: '错误',
            message: '数据备份异常'
          });
        });
    },
    //进入时显示提示框
    showTooltip(row) {
      row.showTooltip = true;
    },
    //退出时隐藏提示框
    hideTooltip(row) {
      row.showTooltip = false;
    },
    goHeartbeatLogInfo(row, column, event) {
      this.isShow = false;
      this.$refs.hbInf.initHeartBeatInf(row.pkId);
    },
    goBack() {
      this.isShow = true;
    }
  }
}
</script>
